<template>
    <div class="table-box">
        <!--    查询组件    -->
        <!--     @onFormflag="onFormflag" 搜索折叠事件，可触发表格高度重绘    -->
        <tw-form v-if="mainData.lists" :lists="mainData.lists || []" :formData="mainData.formData"
            :labelWidth="mainData.labelWidth" :isFormBnts="mainData.isFormBnts" :extraField="mainData.extraField"
            @submitForm="seekTable" :beforeChange="mainData.beforeChange" :foldNumber="mainData.foldNumber || 4" @onFormflag="onFormflag" @resetForm="resetForm">
                <template  v-for="item in mainData.lists" #[item.key]>
                    <slot v-if="item.slot" :name="item.key"></slot>
                </template>
        </tw-form>
        <!--    表格组件    -->
        <TwTable ref="mainTable" :id="mainData.id" :url="mainData.tableUrl" :method="mainData.method" :tableParams="mainData.formData" :selectable="mainData.selectable"
            :isCheck="mainData.isCheck" :isRradio="mainData.isRradio" :showIndex="mainData.showIndex" :showPagination="mainData.showPagination" :lists="mainData.tableLists"
            :border="mainData.border" :botHeight="mainData.botHeight || 50" :tableIndex="mainData.tableIndex"
            :size="mainData.size" :columns="mainData.columns" :tableData="mainData.tableData" :stripe="mainData.stripe" :isTableHeader="mainData.isTableHeader" :autoScrollToTop="mainData.autoScrollToTop != undefined?mainData.autoScrollToTop : true"
            :tableBtns="mainData.tableBtns" :headBtns="mainData.headBtns" :tabindex="mainData.tabIndex || 0"
            :highlightCurrentRow="mainData.highlightCurrentRow" :rowClassName="mainData.rowClassName"  :isLoadStatus="mainData.isLoadStatus"
            @tableCallback="tableCallback" @checkSelect="checkSelect" @selectionChange="selectionChange" @rowCheck="rowCheck" @tableCurrentChange="tableCurrentChange" @setTableTotal="setTableTotal">

            <template #tableHeader="scope">
                <slot name="tableHeader"></slot>
            </template>
            <template #table-l="scope">
                <slot name="table-l"></slot>
            </template>
            <template #table-c="scope">
                <slot name="table-c"></slot>
            </template>
            <template #table-r="scope">
                <slot name="table-r"></slot>
            </template>
            <template #tableBotHeader="scope">
                <slot name="tableBotHeader"></slot>
            </template>
        </TwTable>
    </div>
</template>


<script setup lang="tsx" name="ContentMain">

import TwForm from "@/components/TwForm/TwForm.vue"
import TwTable from "@/components/TwTable/TwTable.vue"
let { proxy } = getCurrentInstance()

console.log(proxy);

defineOptions({
    name: 'ContentMain'
})

const { mainData } = defineProps({
    mainData: Object,
})

let mainTable = $ref(null)


const onFormflag = () => {
    setTimeout(() => {
        mainTable.setTableDataHeight()
    }, 100)
}

const setTableDataHeight = () =>{
    mainTable.setTableDataHeight()
}
let emits = defineEmits(['tableCallback', 'checkSelect', 'rowCheck', 'tableCurrentChange', 'resetForm', 'submitForm', 'selectionChange'])

const tableCallback = (data) => {
    emits('tableCallback', data)
}

// 重置form
const resetForm = () => {
    emits('resetForm')
}
const checkSelect = (data) => {
    emits('checkSelect', data)
}

const selectionChange = (data) =>{
    emits('selectionChange', data)
}

const rowCheck = (data) => {
    emits('rowCheck', data)
}

const tableCurrentChange = (data) => {
    emits('tableCurrentChange', data)
}

const setCurrentRow = (data?: any) => {
    mainTable.setCurrentRow(data)
}

const getTable = () => {
    mainTable.getTable()
}

const seekTable = () => {
    mainData.formData.pageNumber = 1
    if(mainData.tableUrl)getTable()
    emits('submitForm', mainData.formData)
}

const getAllCheck = () => {
    return mainTable.getAllCheck()
}

const getTableLists = () => {
    return mainTable.dataList
}

const setTableLists = (lists) => {
    mainTable.setTableLists(lists)
}

const clearSelection = () => {
    mainTable.clearSelection()
}

const toggleRowSelection = (rows, status) => {
    mainTable.toggleRowSelection(rows, status)
}

const setTableTotal = (num) => {
    mainTable.setTableTotal(num)
}

defineExpose({ getTable, seekTable, getAllCheck, getTableLists, setTableLists, setCurrentRow, clearSelection, toggleRowSelection, setTableTotal, setTableDataHeight })


</script>


<style scoped lang="scss"></style>
